<template>
  <div>
    <el-select   @focus="setOptionWidth" popper-class="ft-project-select" :disabled="disabled"
               v-if="editable" v-model="projectInfo" value-key="projectId"
               :placeholder="placeholder" filterable
               @change="selectProject" :clearable="clearable"
               :popper-append-to-body="popperAppendToBody" >
      <el-option
       :style='{width: selectOptionWidth}'
          v-for="item in projectList"
          :key="item.projectInfo"
          :label="item.projectName"
          :value="item">
        <span>{{item.projectName}}</span>
        <div style='color:#8492a6'>
          <span>{{item.projectCode}}</span>
          <span>&nbsp;项目金额：{{item.projectAmt}}</span>
        </div>
      </el-option>
    </el-select>
    <span v-if="!editable&&projectInfo">{{projectInfo.projectName}}</span>
  </div>
</template>

<script>
export default {
  name: "FtProjectInfo",
  props: {
    placeholder: {
      type: String,
      default: '请输入项目名称'
    },
    value: {
      type: String
    },
    editable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    popperAppendToBody: {
      type: Boolean,
      default: true
    },
    sourceBillType: {
      type: String,
      require:true
    }
  },
  mounted() {
    this.request()
  },
  data() {
    return {
      selectOptionWidth:'',
      projectList: [],
      projectInfo: null,
      projectId: this.value
    }
  },
  methods: {
      setOptionWidth(event) {
          this.$nextTick(() =>{
              this.selectOptionWidth = event.srcElement.offsetWidth + 'px'            
          })
      },
    request() {
      this.loading = true
      let url = ""
      if(this.sourceBillType == 'CONTRACT_MAKE'){
        url = "/joys-rest/ncls-bms/contract/query"
      }else{
        url = "/joys-rest/ncls-bms/cont/signing/query"
      }
      this.$http.post(url).then(resp => {
        this.projectList = resp.body
        this.merge()
        this.loading = false
      }).catch(err => {
        if(err.body) {
          this.$message.error(err.body.message || "项目查询失败！")
        } else {
          this.$message.error("项目查询失败！")
        }
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    crearData(){
      this.projectInfo = {};
    },
    selectProject() {
      this.projectId = this.projectInfo.projectId
      this.$emit('input', this.projectInfo.projectId)
      this.$emit('change', this.projectInfo)
      this.request()
    },
    merge() {
      this.projectId && this.projectList.find((item) => {
        if (item.projectId === this.projectId) {
          this.projectInfo = item
        }
      })
    }
  },
  watch: {
    value(newVal) {
      this.projectId = newVal
      this.merge()
    }
  }
}
</script>

<style>
.ft-project-select .el-select-dropdown__item {
  padding: 4px 20px;
  font-size: 14px;
  line-height: 21px;
  height: auto;
}
</style>